<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页-时间轴</title>
	<style>html,body,.chart{height:100%;margin:0;padding:0;}</style>
</head>
<body class="custom-chart" style="overflow: hidden;">
	<div id="container-shishishujubar"  class="chart"></div>
	<script src="../../scripts/jquery-1.11.3.min.js"></script>
	<!--<script src="../../scripts/lib/echarts/echarts-new.js"></script>
	<script src="../../scripts/lib/echarts/theme/macarons.js"></script>-->
    <script src="../../scripts/lib/echarts-3.3.1/echarts.js"></script>
  	<script src="../../scripts/lib/echarts-3.3.1/theme/macarons.js"></script>
	<script type="text/javascript">
		$(function() {
			var myChart = echarts.init(document.getElementById('container-shishishujubar'),'macarons')
			myChart.showLoading()
			var dataMap = {};

			function dataFormatter(obj) {

				var pList = ['Wifi围栏','电子围栏','警情系统','重点人群系统','手机采集','其他'];
				var temp;

				for (var year = 2008; year <= 2015; year++) {

					var max = 0;
					var sum = 0;
					temp = obj[year];

					for (var i = 0, l = temp.length; i < l; i++) {

						max = Math.max(max, temp[i]);
						sum += temp[i];
						obj[year][i] = {
							name: pList[i],
							value: temp[i]
						}
					}

					obj[year + 'max'] = Math.floor(max / 100) * 100;
					obj[year + 'sum'] = sum;
				}
				return obj;
			}


			data:[
			'2008-01-01','2009-01-01','2010-01-01','2011-01-01','2012-01-01','2013-01-01','2014-01-01','2015-01-01'
			],

			dataMap.dataGDP = dataFormatter({
				//max : 60000,
				2015: [12751, 19307, 24515, 13237, 14859, 32226,16251, 11907, 21515, 15237, 10359, 43226],
				2014: [13251, 18307, 38515, 11237, 24359, 22226,26251, 12307, 24515, 10237, 14359, 11226],
				2013: [21251, 11307, 24515, 21237, 24359, 27426,16251, 11307, 24515, 16237, 12359, 28226],
				2012: [16251, 31307, 24515, 27237, 14859, 42226,19251, 21007, 37515, 15237, 14359, 24226],
				2011: [16251, 13307, 29515, 11237, 22259, 31226,12251, 13307, 26515, 11237, 14359, 27226],
				2010: [15251, 41307, 24515, 15237, 24359, 12226,12651, 11307, 28515, 17237, 10359, 22226],
				2009: [13251, 21307, 32515, 18237, 22659, 32226,21251, 14307, 23515, 11237, 14379, 12226],
				2008: [17251, 17507, 14515, 15237, 13759, 26226,30251, 11307, 31515, 11237, 14359, 32226]
			});

			dataMap.dataPI = dataFormatter({
				//max : 4000,
				2015: [16251, 19307, 24515, 13237, 14859, 32226,16251, 11907, 21515, 15237, 10359,13226],
				2014: [21251, 21307, 32515, 18237, 22659, 32226,21251, 14307, 23515, 11237, 14379, 12226],
				2013: [13551, 13307, 29515, 11237, 22259, 31226,12251, 13307, 26515, 11237, 14359, 27226],
				2012: [19151, 11307, 24515, 11237, 14359, 26226,36251, 11307, 24515, 11237, 14359, 32226],
				2011: [11251, 31307, 24515, 18237, 14859, 42226,19251, 21007, 37515, 15237, 14359, 24226],
				2010: [17251, 18307, 38515, 11237, 24359, 22226,26251, 12307, 23715, 10237, 14359, 21226],
				2009: [12651, 11307, 21515, 21237, 24359, 27426,16251, 11307, 22515, 16237, 12359, 28226],
				2008: [12951, 41307, 23115, 15237, 24359, 12226,12651, 12507, 28815, 17237, 10359, 22226]
			});

			dataMap.dataSI = dataFormatter({
				//max : 26600,
				2015: [10251, 19307, 24515, 13237, 14859, 32226,16251, 11907, 21515, 15237, 10359, 4226],
				2014: [13651, 18307, 38515, 11237, 24359, 22226,26251, 12307, 24515, 10237, 14359, 31226],
				2013: [15651, 11307, 24515, 21237, 2439, 27426,16251, 11307, 24515, 16237, 12359, 28226],
				2012: [16251, 31307, 24515, 23237, 14859, 42226,19251, 21007, 37515, 15237, 14359, 24226],
				2011: [16251, 13307, 29515, 11237, 22259, 31226,12251, 13307, 26515, 11237, 14359, 27226],
				2010: [15251, 41307, 24515, 15237, 2459, 12226,12651, 11307, 16515, 17237, 10359, 22226],
				2009: [13251, 21307, 32515, 18237, 22659, 32226,21251, 14307, 23515, 11237, 14379, 12226],
				2008: [11251, 11307, 24515, 26237, 18259, 26226,20251, 11307, 24515, 11237, 14359, 12226]
			});

			dataMap.dataTI = dataFormatter({
				//max : 25000,
				2015: [16251, 13307, 29515, 11237, 22259, 31226,12251, 13307, 26515, 11237, 14359, 27226],
				2014: [12251, 41307, 24515, 15237, 24359, 12226,12651, 11307, 24515, 17237, 10359, 42226],
				2013: [16251, 19307, 24515, 13237, 14859, 32226,16251, 1907, 21515, 15237, 10359, 38226],
				2012: [16251, 31307, 24515, 17237, 14859, 12226,19251, 21007, 37515, 15237, 14359, 24226],
				2011: [16251, 21307, 32515, 18237, 22659, 32226,21251, 16307, 23515, 31237, 14379, 12226],
				2010: [16251, 18307, 38515, 1137, 24359, 22226,26251, 12307, 26515, 10237, 14359, 11226],
				2009: [16251, 21307, 24515, 21237, 24359, 27426,16251, 11307, 24515, 16237, 12359, 28226],
				2008: [16251, 31307, 24515, 18237, 12559, 26226,27251, 11307, 24515, 11237, 14359, 12226]
			});

			dataMap.dataEstate = dataFormatter({
				//max : 3600,
				2015: [16251, 19307, 24515, 13237, 14859, 32226,16251, 11907, 21515, 15237, 10359, 5226],
				2014: [26251, 41307, 24515, 15237, 24359, 12226,12651, 11307, 24515, 17237, 10359, 32426],
				2013: [18251, 21307, 32515, 18237, 22659, 32226,21251, 14307, 23515, 11237, 11379, 12226],
				2012: [13251, 31307, 2451, 18237, 14859, 4126,19251, 21007, 37515, 15237, 1439, 24226],
				2011: [16851, 13307, 29515, 11237, 22259, 31226,12251, 13307, 26515, 11237, 14359, 27226],
				2010: [15251, 18307, 38515, 11237, 24359, 22226,26251, 12307, 21515, 10237, 14359, 11226],
				2009: [14651, 13307, 24515, 21237, 24359, 27426,16251, 11307, 24515, 16237, 12359, 28226],
				2008: [18251, 16307, 24115, 15237, 12959, 26226,14251, 11307, 24515, 11237, 14359, 32226]
			});

			dataMap.dataFinancial = dataFormatter({
				//max : 3200,
				2015: [1151, 9307, 2415, 1337, 1859, 3226,1251, 1907, 2155, 1537, 10359, 326],
				2014: [1651, 1837, 3815, 1237, 2459, 2226,2621, 1207, 2455, 1037, 14359, 1126],
				2013: [1821, 4107, 2515, 1537, 2459, 1226,1261, 1107, 2515, 1727, 1359, 2226],
				2012: [1651, 2107, 3515, 1827, 2259, 3226,2151, 1407, 2355, 4137, 1479, 1226],
				2011: [1251, 1507, 2215, 1137, 1459, 2626,1951, 1107, 2515, 1237, 1459, 3226],
				2010: [2621, 1167, 2615, 2237, 2439, 2726,1651, 1137, 2515, 1237, 1259, 3826],
				2009: [1551, 3107, 2515, 1723, 1489, 4226,1251, 2107, 3515, 1527, 1459, 2426],
				2008: [1651, 1307, 2515, 3237, 2229, 3126,1221, 1307, 2515, 2237, 1659, 2726]
			});


			option = {
				baseOption: {
					timeline: {
						// y: 0,
						axisType: 'category',
						// realtime: false,
						// loop: false,
						autoPlay: true,
						// currentIndex: 2,
						playInterval: 3000,
						// controlStyle: {
						//     position: 'left'
						// },
						data: [
						'2008', '2009',  {
							value: '2010',
							tooltip: {
								formatter: '{b} 历史新高'
							},
							symbol: 'diamond',
							symbolSize: 16
						},
						'2011', '2012', '2013', {
							value: '2014',
							tooltip: {
								formatter: function(params) {
									return params.name + '历史新高2';
								}
							},
							symbol: 'diamond',
							symbolSize: 18
						}, '2015'
						]/*,
						label: {
							formatter: function(s) {

								var labelDate = new Date(s)
								return (labelDate.getMonth() + 1) + '-' + labelDate.getDate()
							}
						}*/
					},
					legend: {
						x: 'right',
						data: ['Wifi围栏','电子围栏','警情系统','重点人群系统','手机采集','其他'],
						selected:{
							'重点人群系统':false,
							'手机采集':false,
							'其他':false
						}
					},
					calculable: true,
					grid: {
						left:50,
						right:10,
						top: 80,
						bottom:80
					},
					xAxis: [{
						'type': 'category',
						'axisLabel': {
							'interval': 0
						},
						'data': ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
						splitLine: {
							show: false
						}
					}],
					yAxis: [{
						type: 'value',
						name: '重点人群系统量（次）',
						// max: 53500
						max: 50000
					}],
					series: [{
						name: 'Wifi围栏',
						type: 'bar'
					}, {
						name: '电子围栏',
						type: 'bar'
					}, {
						name: '警情系统',
						type: 'bar'
					}, {
						name: '重点人群系统',
						type: 'bar'
					}, {
						name: '手机采集',
						type: 'bar'
					}, {
						name: '其他',
						type: 'bar'
					}, {
						name: '重点人群系统量占比',
						type: 'pie',
						center: ['75%', '18%'],
						radius: '20%'
					}]
				},
				options: [{

					series: [{
						data: dataMap.dataGDP['2008']
					}, {
						data: dataMap.dataFinancial['2008']
					}, {
						data: dataMap.dataEstate['2008']
					}, {
						data: dataMap.dataPI['2008']
					}, {
						data: dataMap.dataSI['2008']
					}, {
						data: dataMap.dataTI['2008']
					}, {
						data: [{
							name: '电子围栏',
							value: dataMap.dataPI['2008sum']
						}, {
							name: 'Wifi围栏',
							value: dataMap.dataSI['2008sum']
						}, {
							name: '警情系统',
							value: dataMap.dataSI['2008sum']
						}, {
							name: '重点人群系统',
							value: dataMap.dataTI['2008sum']
						}, {
							name: '手机采集',
							value: dataMap.dataSI['2008sum']
						}, {
							name: '其他',
							value: dataMap.dataSI['2008sum']
						}]
					}]
				}, {

					series: [{
						data: dataMap.dataGDP['2009']
					}, {
						data: dataMap.dataFinancial['2009']
					}, {
						data: dataMap.dataEstate['2009']
					}, {
						data: dataMap.dataPI['2009']
					}, {
						data: dataMap.dataSI['2009']
					}, {
						data: dataMap.dataTI['2009']
					}, {
						data: [{
							name: '电子围栏',
							value: dataMap.dataPI['2009sum']
						}, {
							name: 'Wifi围栏',
							value: dataMap.dataSI['2009sum']
						}, {
							name: '警情系统',
							value: dataMap.dataSI['2009sum']
						}, {
							name: '重点人群系统',
							value: dataMap.dataTI['2009sum']
						}, {
							name: '手机采集',
							value: dataMap.dataSI['2009sum']
						}, {
							name: '其他',
							value: dataMap.dataSI['2009sum']
						}]
					}]
				}, {

					series: [{
						data: dataMap.dataGDP['2010']
					}, {
						data: dataMap.dataFinancial['2010']
					}, {
						data: dataMap.dataEstate['2010']
					}, {
						data: dataMap.dataPI['2010']
					}, {
						data: dataMap.dataSI['2010']
					}, {
						data: dataMap.dataTI['2010']
					}, {
						data: [{
							name: '电子围栏',
							value: dataMap.dataPI['2010sum']
						}, {
							name: 'Wifi围栏',
							value: dataMap.dataSI['2010sum']
						}, {
							name: '警情系统',
							value: dataMap.dataSI['2010sum']
						}, {
							name: '重点人群系统',
							value: dataMap.dataTI['2010sum']
						}, {
							name: '手机采集',
							value: dataMap.dataSI['2010sum']
						}, {
							name: '其他',
							value: dataMap.dataSI['2010sum']
						}]
					}]
				}, {

					series: [{
						data: dataMap.dataGDP['2011']
					}, {
						data: dataMap.dataFinancial['2011']
					}, {
						data: dataMap.dataEstate['2011']
					}, {
						data: dataMap.dataPI['2011']
					}, {
						data: dataMap.dataSI['2011']
					}, {
						data: dataMap.dataTI['2011']
					}, {
						data: [{
							name: '电子围栏',
							value: dataMap.dataPI['2011sum']
						}, {
							name: 'Wifi围栏',
							value: dataMap.dataSI['2011sum']
						}, {
							name: '警情系统',
							value: dataMap.dataSI['2011sum']
						}, {
							name: '重点人群系统',
							value: dataMap.dataTI['2011sum']
						}, {
							name: '手机采集',
							value: dataMap.dataSI['2011sum']
						}, {
							name: '其他',
							value: dataMap.dataSI['2011sum']
						}]
					}]
				}, {

					series: [{
						data: dataMap.dataGDP['2012']
					}, {
						data: dataMap.dataFinancial['2012']
					}, {
						data: dataMap.dataEstate['2012']
					}, {
						data: dataMap.dataPI['2012']
					}, {
						data: dataMap.dataSI['2012']
					}, {
						data: dataMap.dataTI['2012']
					}, {
						data: [{
							name: '电子围栏',
							value: dataMap.dataPI['2012sum']
						}, {
							name: 'Wifi围栏',
							value: dataMap.dataSI['2012sum']
						}, {
							name: '警情系统',
							value: dataMap.dataSI['2012sum']
						}, {
							name: '重点人群系统',
							value: dataMap.dataTI['2012sum']
						}, {
							name: '手机采集',
							value: dataMap.dataSI['2012sum']
						}, {
							name: '其他',
							value: dataMap.dataSI['2012sum']
						}]
					}]
				}, {

					series: [{
						data: dataMap.dataGDP['2013']
					}, {
						data: dataMap.dataFinancial['2013']
					}, {
						data: dataMap.dataEstate['2013']
					}, {
						data: dataMap.dataPI['2013']
					}, {
						data: dataMap.dataSI['2013']
					}, {
						data: dataMap.dataTI['2013']
					}, {
						data: [{
							name: '电子围栏',
							value: dataMap.dataPI['2013sum']
						}, {
							name: 'Wifi围栏',
							value: dataMap.dataSI['2013sum']
						}, {
							name: '警情系统',
							value: dataMap.dataSI['2013sum']
						}, {
							name: '重点人群系统',
							value: dataMap.dataTI['2013sum']
						}, {
							name: '手机采集',
							value: dataMap.dataSI['2013sum']
						}, {
							name: '其他',
							value: dataMap.dataSI['2013sum']
						}]
					}]
				}, {

					series: [{
						data: dataMap.dataGDP['2014']
					}, {
						data: dataMap.dataFinancial['2014']
					}, {
						data: dataMap.dataEstate['2014']
					}, {
						data: dataMap.dataPI['2014']
					}, {
						data: dataMap.dataSI['2014']
					}, {
						data: dataMap.dataTI['2014']
					}, {
						data: [{
							name: '电子围栏',
							value: dataMap.dataPI['2014sum']
						}, {
							name: 'Wifi围栏',
							value: dataMap.dataSI['2014sum']
						}, {
							name: '警情系统',
							value: dataMap.dataSI['2014sum']
						}, {
							name: '重点人群系统',
							value: dataMap.dataTI['2014sum']
						}, {
							name: '手机采集',
							value: dataMap.dataSI['2014sum']
						}, {
							name: '其他',
							value: dataMap.dataSI['2014sum']
						}]
					}]
				}, {

					series: [{
						data: dataMap.dataGDP['2012']
					}, {
						data: dataMap.dataFinancial['2012']
					}, {
						data: dataMap.dataEstate['2012']
					}, {
						data: dataMap.dataPI['2012']
					}, {
						data: dataMap.dataSI['2012']
					}, {
						data: dataMap.dataTI['2012']
					}, {
						data: [{
							name: '电子围栏',
							value: dataMap.dataPI['2012sum']
						}, {
							name: 'Wifi围栏',
							value: dataMap.dataSI['2012sum']
						}, {
							name: '警情系统',
							value: dataMap.dataSI['2012sum']
						}, {
							name: '重点人群系统',
							value: dataMap.dataTI['2012sum']
						}, {
							name: '手机采集',
							value: dataMap.dataSI['2015sum']
						}, {
							name: '其他',
							value: dataMap.dataSI['2015sum']
						}]
					}]
				}]
			};
			// 为echarts对象加载数据
			myChart.setOption(option);
			myChart.hideLoading();
			window.onresize = myChart.resize

		})
</script>
</body>
</html>